<template>
  <el-dialog v-model="detilOpen" title="工单详情" top="30px">
    <div class="detail-page">
      <div class="detail-item">
        <span class="label">工单编号：</span>
        <span class="value">{{ detailData.id }}</span>
      </div>
      <div class="detail-item">
        <span class="label">创建人：</span>
        <span class="value">{{ detailData.createName }}</span>
        <span class="label">更新人：</span>
        <span class="value status-done">{{ detailData.updater }}</span>
        <!-- <span class="label">部门：</span>
        <span class="value">{{ detailData.deptId }}</span> -->
      </div>
      <div class="detail-item">
        <span class="label">来源日期：</span>
        <span class="value">{{ detailData.sourceDate }}</span>
        <span class="label">来源：</span>
        <span class="value">{{ detailData.source }}</span>
      </div>
      <div class="detail-item">
        <span class="label">客户名称：</span>
        <span class="value">{{ detailData.customerName }}</span>
        <span class="label">客户年龄：</span>
        <span class="value">{{ detailData.customerAge }}</span>
      </div>
      <div class="detail-item">
        <span class="label">客户手机号：</span>
        <span class="value">{{ detailData.customerPhone }}</span>
        <span class="label">客户芝麻分：</span>
        <span class="value">{{ detailData.customerCreditScore }}</span>
      </div>
      <div class="detail-item">
        <span class="label">平台：</span>
        <span class="value">{{ detailData.platformName }}</span>
        <span class="label">第几台：</span>
        <span class="value">{{ detailData.deviceCount }}</span>
      </div>
      <div class="detail-item">
        <span class="label">型号颜色：</span>
        <span class="value">{{ detailData.modelColor }}</span>
        <span class="label">客户寄出单号：</span>
        <span class="value">{{ detailData.customerSendNo }}</span>
      </div>
      <div class="detail-item">
        <span class="label">垫付金额：</span>
        <span class="value text-red">{{ detailData.advanceAmount
        }}<span class="history" @click="viewHistory('df')">垫付记录</span></span>
        <span class="label">企业编号：</span>
        <span class="value">{{ detailData.enterpriseNo }}</span>
      </div>
      <div v-if="dfVisible" class="dfTableBox">
        <el-table :data="tableData" border style="width: 100%" :scroll-x="true">
          <el-table-column label="序号" width="100" type="index" align="center"/>
          <el-table-column align="center" label="工单编号" prop="orderNo" />
          <el-table-column align="center" label="垫付金额" prop="amount" />
          <el-table-column align="center" label="时间" prop="createTime" />
        </el-table>
      </div>
      <div class="detail-item">
        <span class="label">预计回款总计：</span>
        <span class="value">{{ detailData.expectedPayment }}</span>
        <span class="label">客户收货单号：</span>
        <span class="value">{{ detailData.customerReceiveNo }}</span>
      </div>
      <div class="detail-item">
        <span class="label">客户寄出单号：</span>
        <span class="value">{{ detailData.customerSendNo }}</span>
        <span class="label">回款金额：</span>
        <span class="value text-red">{{ detailData.paymentAmount }}</span>
      </div>
      <div class="detail-item">
        <span class="label">商家回收：</span>
        <span class="value">{{ detailData.merchantRecycle }}</span>
        <span class="label">快递费：</span>
        <span class="value">{{ detailData.expressFee }}</span>
      </div>
      <div class="detail-item">
        <span class="label">利润：</span>
        <span class="value">{{ detailData.profit }}</span>
        <span class="label">异常工单退款：</span>
        <span class="value">{{ detailData.abnormalRefund }}</span>
      </div>
      <div class="detail-item">
        <span class="label">状态：</span>
        <span class="value">{{ getDictLabel(DICT_TYPE.TICKET_STATUS, detailData.status) }}</span>
        <span class="label">办单日期：</span>
        <span class="value">{{ detailData.handleDate }}</span>
      </div>
      <div class="detail-item">
        <span class="label">备注：</span>
        <span class="value"></span>
      </div>
     <!--  <div style="padding:0 30px">
        <h3 style="margin-bottom: 20px;">工单跟踪</h3>
        <el-timeline>
          <el-timeline-item v-for="(activity, index) in detailData.histories" :key="index"
            :timestamp="activity.createTime">
            {{ activity.operationDesc }}
          </el-timeline-item>
        </el-timeline>
      </div> -->

    </div>


  </el-dialog>
</template>

<script setup>
import { ref, defineExpose, computed } from 'vue'
import { getDictLabel, DICT_TYPE } from '@/utils/dict'
// 详情数据
const detailData = ref({})
const detilOpen = ref(false)
const dfVisible = ref(false)
const onOpen = (data) => {
  detilOpen.value = true
  detailData.value = data
  tableData.value = data.advances
}
const tableData = ref([])
const viewHistory = (type) => {
  switch (type) {
    case 'df':
      dfVisible.value = !dfVisible.value
      break
    case 'hk':
      break
    case 'tk':
      break

    default:
      break
  }
}
defineExpose({
  onOpen
})
</script>
<style scoped lang="scss">
.detail-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  line-height: 40px;
}

.detail-item {
  display: flex;
  margin-bottom: 12px;
}

.label {
  display: inline-block;
  width: 120px;
  text-align: right;
  margin-right: 8px;
  color: #606266;
}

.value {
  display: inline-block;
  min-width: 150px;
  color: #303133;
}

.status-done {
  color: #67c23a;
}

.text-red {
  color: #f56c6c;
}

.ml-2 {
  margin-left: 2px;
}

.history {
  color: rgb(0, 90, 226);
  cursor: pointer;
  margin-left: 20px;

  &:hover {
    color: rgb(3, 57, 139);
  }
}

.dfTableBox {
  margin: 20px 0;
}
</style>
